Wheels.TripPlannerAdvanced = new Ext.form.FormPanel({
    scroll: 'vertical',

    items: [
    {
        xtype: 'fieldset',
        title: 'Options:',
        items:
        [
            { xtype: 'select', name: 'walk', label: 'Walk:', options: [{ text: '0.25 mile', value: '0.25' }, { text: '0.5 mile', value: '0.5' }, { text: '1 mile', value: '1'}] },
            { xtype: 'select', name: 'minimize', label: 'Mimimize:', options: [{ text: 'Transfers', value: 'transfers' }, { text: 'Traveling Time', value: 'time' }, { text: 'Walkinig', value: 'walking'}] }
        ]
    },
    {
        xtype: 'fieldset',
        title: 'Use:',
        items: [{ xtype: 'splitbutton', name: 'use', items: [{ text: 'Bus', style: 'width: 33%', handler: function () { setUse('bus') } }, { text: 'Rail', style: 'width: 33%', handler: function () { setUse('rail') } }, { id: 'rail', text: 'Bus & Rail', style: 'width: 34%', cls: 'x-button-active', handler: function () { setUse('both') } }]
        }]
    },
    new Ext.Button({ text: 'Apply', style: 'margin-top: 20px', handler: function () {
        Wheels.TripPlannerAdvanced.updateModel(TripPlan, true);
        setCard('trip-planner');
    }
    })
]
});

function setUse(preference) {
    TripPlan.data.use = preference;
}
